<template>
	<view>
		<view style="background: #fff;width: 750rpx;height: 100rps;position: fixed;top: 0rpx;z-index: 100;">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view style="width: 750rpx;height: 80rpx;"></view>
		<view v-if="lists.length!=0">
			<view class="order_list_item" v-for="(item,index) in lists" :key="index">
				<view class="order_list_header" @click="toOrderDetail(item.orderId)">
					<text>购买时间：{{item.orderTime||''}}</text>
					<text>{{item.orderStatus=='WAITPAY'?'待支付':item.orderStatus=='WAITSEND'?'待发货':item.orderStatus=='HAVESEND'?'已发货':item.orderStatus=='COMPLETED'?'已完成':item.orderStatus=='CANCELLED'?'已取消':''}}</text>
				</view>
				<view class="order_list_middle" @click="toOrderDetail(item)">
					<image :src="item.orderPic||'https://aliyunoss.hntgov.net/sd/all_moren.png'"></image>
					<view class="olm_r">
						<view
							style="width: 100%;position: relative;display: flex;align-items: center;color: #3D3D3D;font-size: 26rpx;">
							<view style="width: 80%;">{{item.orderName||''}}</view>
							<text style="position: absolute;right: 0rpx;">￥{{(item.goodsAmount/100).toFixed(2)}}</text>
						</view>
						<view
							style="width: 100%;position: relative;display: flex;align-items: center;color: #8C8888;font-size: 26rpx;margin-top: 30rpx;">
							<text>卡类型：电子卡（我已阅读使用须知）</text>
							<text style="position: absolute;right: 0rpx;">x{{item.buyNum||1}}</text>
						</view>
					</view>
				</view>
				<view style="width: 630rpx;height: 1rpx;background-color: #E7E6E6;margin-top: 46rpx;"></view>
				<view
					style="width: 630rpx;position: relative;display: flex;align-items: center;color: #8C8888;font-size: 26rpx;margin-top: 30rpx;">
					<text @click="toOrderDetail(item)">共{{item.buyNum||1}}件商品&nbsp;&nbsp;小计：<text
							style="color: #F03F4D;">￥{{(item.payableAmount/100).toFixed(2)}}</text></text>
					<view style="position: absolute;right: 0rpx;">
						<u-tag text="去支付" v-if="item.orderStatus=='WAITPAY'" @click="toPay(item)" type="primary" shape='circle' />

						<!-- 	<u-tag text="去评价" @click="toPj(item)" type="info"
						shape='circle' />	 -->
					</view>

					<!-- <u-tag text="申请售后" @click="toSfType(item)" type="error" style="position: absolute;right: 200rpx;"
							shape='circle' v-if="item.payStatus!='WAITPAY'&&item.payStatus!='CANCELLED'" /> -->
				</view>
			</view>
		</view>
		<image v-else src="https://aliyunoss.hntgov.net/h5/list_nodata.png" mode="widthFix"
			style="width: 520rpx;margin-left:115rpx;"></image>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				lists: [],
				status: 'loadmore',
				list: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待发货',
				}, {
					name: '已发货',
				}, {
					name: '已完成',
				}, {
					name: '已取消',
				}],
				obj: {
					"pageNo": 1,
					"pageSize": 10,
					"orderStatus": "",
					"orderPhone": ''
				},
				obj1: {
					"orderNo": "",
					"amount": 1,
					"openId": "",
					"description": "测试",
				},
				pageAll: 2,
				current: 0,
				payStatus: ''
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '我的订单'
			})
		},
		onLoad(e) {
			that = this
			this.obj.orderPhone = uni.getStorageSync('phone')
			this.current =parseInt(e.index)
			switch (this.current) {
				case 0:
					this.obj.orderStatus = ''
					break
				case 1:
					this.obj.orderStatus = 'WAITPAY'
					break
				case 2:
					this.obj.orderStatus = 'WAITSEND'
					break
				case 3:
					this.obj.orderStatus = 'HAVESEND'
					break
				case 4:
					this.obj.orderStatus = 'COMPLETED'
					break
				case 5:
					this.obj.orderStatus = 'CANCELLED'
					break
			}
			this.queryCardOrderPageMethod()
		},
		onShow() {
			
		},
		onReachBottom() {
			this.queryCardOrderPageMethod()
		},
		methods: {
			toOrderDetail(e) {
				// this.$store.commit('setOrderDetail',e)
				uni.navigateTo({
					url: '/pages/order/orderdetail?id=' + e.orderId
				})
			},
			toSfType(e) {
				uni.navigateTo({
					url: '/pages/order/sftype'
				})
			},
			toPj() {
				console.log(1111);
				uni.navigateTo({
					url: '/pages/order/playevaluate'
				})

			},
			toPay(e) {
				that.$u.api.getPrepayUrl({
					openId:uni.getStorageSync('openId'),
					orderNo:e.orderId,
					amount:e.buyNum,
					description:''
				}).then(result => {
					if (result) {
						uni.requestPayment({
							provider:'alipay',
							tradeNO:result.data.outTradeNo,
							success: function(res1) {
								if(res1.resultCode=='9000'){
									this.obj.pageNo=1
									this.pageAll=2
									this.lists=[]
									this.queryCardOrderPageMethod()
								}
							},
							fail: function(err) {
								console.log(err);
							}
						})
					}
				}) 
			},
			change(index) {

				this.current = index;
				switch (index) {
					case 0:
						this.obj.orderStatus = ''
						break
					case 1:
						this.obj.orderStatus = 'WAITPAY'
						break
					case 2:
						this.obj.orderStatus = 'WAITSEND'
						break
					case 3:
						this.obj.orderStatus = 'HAVESEND'
						break
					case 4:
						this.obj.orderStatus = 'COMPLETED'
						break
					case 5:
						this.obj.orderStatus = 'CANCELLED'
						break
				}
				this.lists = []
				this.obj.pageNo = 1
				this.pageAll = 2
				this.queryCardOrderPageMethod()

			},
			queryCardOrderPageMethod() {
				if (that.obj.pageNo <= that.pageAll) {
					this.$u.api.getListOrderUrl(this.obj).then(res => {
						if (res) {
							that.obj.pageNo = that.obj.pageNo * 1 + 1;
							that.pageAll = Math.ceil(res.total / 10)
							if (res.data.list == null || res.data.list.length == 0) {
								that.status = 'nomore'
								return
							}
							if (that.obj.pageNo == 2) {
								that.lists = res.data.list
							} else {
								that.lists = that.lists.concat(res.data.list)
							}
							if (that.obj.pageNo > that.pageAll) {
								that.status = 'nomore'
							}
						} else {
							that.status = 'nomore'
						}
					})

				}
			}
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped lang="less">
	.order_list_item {
		background-color: #fff;
		border-radius: 16rpx;
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding: 52rpx 30rpx 52rpx 30rpx;

		.order_list_header {
			width: 630rpx;
			position: relative;
			display: flex;
			align-items: center;

			text:first-child {
				color: #4A4949;
				font-size: 26rpx;
			}

			text:last-child {
				color: #F03F4D;
				font-size: 26rpx;
				position: absolute;
				right: 0rpx;
			}
		}

		.order_list_middle {
			width: 630rpx;
			display: flex;
			
			margin-top: 65rpx;

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 4rpx;
			}

			.olm_r {
				width: 466rpx;
				margin-left: 16rpx;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>